export default {
    install(Vue, options) {
        Vue.directive("highlight", {
            deep: true,
            bind: function(el, binding) {
                // on first bind, highlight all targets
                Array.from(el.querySelectorAll("code")).forEach(target => {
                    // if a value is directly assigned to the directive, use this
                    // instead of the element content.
                    if (binding.value) {
                        target.textContent = binding.value
                    }
                    window.hljs.highlightBlock(target)
                })
            },
            componentUpdated: function(el, binding) {
                // after an update, re-fill the content and then highlight
                Array.from(el.querySelectorAll("code")).forEach(target => {
                    if (binding.value) {
                        target.textContent = binding.value
                    }
                    window.hljs.highlightBlock(target)
                })
            }
        })
    }
}
